<template>
	<view class="page-box">
		<!-- <view class="item"> -->
		<view class="cont_li" style="display: flex;margin: 15px 0px;flex-wrap: wrap;">
			<image style="width: 30rpx;height: 35rpx;margin: 5px 0px;" src="/static/img/ljlc/yd.png" mode="">
			</image>
			<view style="color: #fff;margin: 0 10px;" class="cont_li_label">日志单号:</view>
			<view style="color: #fff;" class="cont_li_value">{{infoData.notransId || "无"}} </view>
		</view>
		<view class="top_hw">
			<view class="top_tle">
				<view class="top_left">
					<image style="width: 37rpx;height: 37rpx;margin: 5px 5px;" src="/static/img/ljlc/car.png"
						mode=""></image>
					<text style="color: #168EEC;font-size: 12px;">运输线路</text>

				</view>
				<view class="top_right">

					<!-- 	<text v-if="infoData.isCityDistribution == 1">城市配送</text>
					<text v-if="infoData.isMedicineDangerScrap == 1">医疗废物</text> -->
				</view>
			</view>
			<view style="display: flex;margin-top: 30rpx;">
				<view class="">
					<view class="q">
						起
					</view>
					<view class="limsx">

					</view>
					<view class="z">
						止
					</view>
				</view>
				<view style="margin-left: 10px;">
					<view class="">
						<view class="txt">
							<!-- {{gInfo[0]}} -->
							{{infoData.startPosZipCodeStr || "-"}}
						</view>
						<view class="rq">
							开始时间：{{infoData.moveStartTime || "无"}}
						</view>
						<view class="zrq">
							{{infoData.startPosAddr || "无"}}
						</view>
					</view>
					<view style="margin-top: 28px;">
						<view class="txt">
							<!-- {{gInfo[1]}} -->
							{{infoData.endPosZipCodeStr || "无"}}
						</view>
						<view class="rq">
							预计结束时间：{{infoData.moveEndTime || "-"}}
						</view>
						<view class="zrq">
							{{infoData.endPosAddr || "无"}}
						</view>
					</view>
				</view>
			</view>
			<view class="hwbox">
				<view class="hwtle">
					车辆信息
				</view>
				<!-- <view class="item"> -->

				<view class="item_cont1">
					<view class="cont_li">
						<view class="cont_li_label">车辆号牌（颜色）:</view>
						<view class="cont_li_value">{{infoData.vehCode || "无"}}
							<text v-if="infoData.vehColor == '黄色'" class="carys">黄</text>
							<text class="carys1" v-if="infoData.vehColor == '蓝色'">蓝</text>
							<text class="carys2" v-if="infoData.vehColor == '黑色'">黑</text>
							<text class="carys3" v-if="infoData.vehColor == '白色'">白</text>
							<text class="carys4" v-if="infoData.vehColor == '绿色'">绿</text>
							<text class="carys4" v-if="infoData.vehColor == '黄绿色'">绿</text>
							<text class="carys4" v-if="infoData.vehColor == '渐变绿'">绿</text>
						</view>
					</view>
					<view class="cont_li">
						<view class="cont_li_label">挂车车辆（颜色）:</view>
						<view class="cont_li_value">{{infoData.trailerNo || '无'}}

							<text v-show="infoData.trailerNo != ''" class="carys">黄</text>


						</view>
					</view>



				</view>

			</view>
			<!-- </view> -->

			<!-- <view class="item"> -->

			<view class="item_cont">
				<view class="cont_li">
					<view class="cont_li_label">活动事由:</view>
					<view v-if="infoData.type == '1'" class="cont_li_value">车辆维修</view>
					<view v-if="infoData.type == '2'" class="cont_li_value">普通运输</view>
					<view v-if="infoData.type == '3'" class="cont_li_value">车辆年检</view>
					<view v-if="infoData.type == '4'" class="cont_li_value">罐体检验</view>
					<view v-if="infoData.type == '5'" class="cont_li_value">车辆保养</view>
					<view v-if="infoData.type == '6'" class="cont_li_value">非民用运输</view>
					<view v-if="infoData.type == '7'" class="cont_li_value">空车运行</view>
					<view v-if="infoData.type == '8'" class="cont_li_value">其他</view>
					
				</view>
				<view class="cont_li">
					<view class="cont_li_label">具体事宜:</view>
					<view class="cont_li_value">{{infoData.note || "无"}}</view>
				</view>
				<view class="cont_li">
					<view class="cont_li_label">填报人:</view>
					<view class="cont_li_value">{{infoData.reporter || "无"}}</view>
				</view>
				<view class="cont_li">
					<view class="cont_li_label">填报日期:</view>
					<view class="cont_li_value">{{infoData.createTime || "无"}}</view>
				</view>

			</view>
			<!-- </view> -->

		</view>
	</view>
</template>

<script>
	import {
		getBillInfo,
		getFirBillInfo
	} from '@/common/api/monitor.js'
	export default {
		data() {
			return {
				infoData: {},
				queryData: null,
				isString: "",
				gInfo: []
			};
		},
		mounted() {
			this.infoData = this.$store.state.roadCheckInfo.outTrafficVO
			// console.log(312223, this.$store.state.roadCheckInfo)
			// console.log(3123, this.$store.state.roadCheckInfo.lineName.split('-'))
			// if (this.$store.state.roadCheckInfo || this.$store.state.roadCheckInfo.billNo) {
			// 	this.infoData = this.$store.state.roadCheckInfo
			// 	this.gInfo = this.infoData.lineName.split('-')

			// 	for (let key in this.infoData) {
			// 		if (this.infoData[key] === "") {
			// 			this.infoData[key] = "无"
			// 		}
			// 		if (this.infoData.endDetailAddress && this.infoData.endDetailAddress.length == 0) {
			// 			this.infoData.endDetailAddress = '空'
			// 		}
			// 	}
			// 	this.infoData.tankVolume = Number(this.infoData.tankVolume).toFixed(1)
			// }


			// if (this.$store.state.roadCheckInfo.vehCode.slice(0, 1) !== '鄂' && this.$store.state.roadCheckInfo.billNo
			// 	.slice(0, 2) !== '42') {
			// 	// this.isOther = true
			// 	this.isString = 'other'

			// 	this.gInfo = this.infoData.lineName.split('-')

			// 	console.log(3123, this.infoData.lineName.split('-'))
			// }
			// //车牌号搜索
			// if(this.queryData.vehCode){
			// 	let params = {
			// 		vehCode:this.queryData.vehCode
			// 	}
			// 	this.getFirBillInfo(params)
			// }
			// //扫二维码
			// if(this.queryData.qrCode){
			// 	let params = {
			// 		qrCode:this.queryData.qrCode
			// 	}
			// 	this.getBillInfo(params)
			// }

		},
		// onLoad(option) { //option为object类型，会序列化上个页面传递的参数
		// 	console.log('传递的参数', option);
		// 	this.queryData = option
		// },
		methods: {
			// getBillInfo(params) {
			// 	getBillInfo(params).then(res => {
			// 		console.log(res, '电子运单信息');
			// 		this.infoData = res.data.data
			// 	})
			// },
			// //车牌号车牌颜色查询
			// getFirBillInfo(params){
			// 	getFirBillInfo(params).then(res => {
			// 		console.log(res, '电子运单信息');
			// 		this.infoData = res.data.data
			// 	})
			// }
		},
	}
</script>

<style lang="scss">
	.page-box {
		height: 100vh;

		display: flex;
		flex-direction: column;
		background: url(/static/img/ljlc/top.png) no-repeat;
		background-size: 100% 59%;
		background-color: #f8f8f8;
		padding: 0 15px;
	}

	.carys {
		//黄
		width: 40rpx;
		height: 40rpx;
		background: #EFD400;
		border-radius: 7rpx;
		display: inline-block;
		text-align: center;
	}

	.carys1 {
		//蓝
		width: 40rpx;
		height: 40rpx;
		background: #168EEC;
		border-radius: 7rpx;
		display: inline-block;
		text-align: center;
		color: #FFFFFF;
	}

	.carys2 {
		//黑
		width: 40rpx;
		height: 40rpx;
		background: #21231e;
		border-radius: 7rpx;
		display: inline-block;
		text-align: center;
		color: #FFFFFF;
	}

	.carys3 {
		//白
		width: 40rpx;
		height: 40rpx;
		background: #fff;
		border-radius: 7rpx;
		display: inline-block;
		text-align: center;
	}

	.carys4 {
		//绿
		width: 40rpx;
		height: 40rpx;
		background: #1a9e34;
		border-radius: 7rpx;
		display: inline-block;
		text-align: center;
		color: #FFFFFF;
	}

	.top_hw {
		width: 692rpx;
		// height: 737rpx;
		background: #FFFFFF;
		border-radius: 18rpx;
		padding: 15px;
		box-sizing: border-box;

		.top_tle {
			display: flex;
			justify-content: space-between;

			.top_left {
				display: flex;
				width: 256rpx;
				height: 58rpx;
				line-height: 58rpx;
				background: linear-gradient(270deg, rgba(22, 142, 236, 0) 0%, rgba(22, 142, 236, 0.3) 100%);
				border-radius: 7rpx;
				// .aa{
				//  transform: translateY(-10px);
				// }
			}

			.top_right {
				width: 101rpx;
				height: 36rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				font-size: 25rpx;
				color: #449D80;
				line-height: 36rpx;
				text-align: left;
				font-style: normal;
			}
		}

		.limsx {
			width: 0rpx;
			height: 121rpx;
			border: 2rpx dashed #4D6CA9;
			margin-left: 7px;
		}

		.q {
			width: 40rpx;
			height: 40rpx;
			background: #168EEC;
			border-radius: 7rpx;
			color: #fff;
			text-align: center;
			line-height: 40rpx;
			font-size: 25rpx;
		}

		.z {
			width: 40rpx;
			height: 40rpx;
			background: #B5B9C2;
			border-radius: 7rpx;
			color: #fff;
			text-align: center;
			line-height: 40rpx;
			font-size: 25rpx;
		}

		.txt {
			width: 100%;
			// height: 40rpx;
			font-family: PingFangSC, PingFang SC;
			font-weight: 500;
			font-size: 29rpx;
			color: #333333;
			line-height: 40rpx;
			text-align: left;
			font-style: normal;
		}

		.rq {
			width: 100%;
			// height: 36rpx;
			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			font-size: 25rpx;
			color: #999999;
			line-height: 36rpx;
		 text-align: left;
			font-style: normal;
		}

		.hwbox {
			width: 632rpx;
			height: 250rpx;
			background: rgba(22, 142, 236, 0.05);
			border-radius: 7rpx;
			margin-top: 20rpx;
			padding: 10px;
			box-sizing: border-box;
			position: relative;

			.hwtle {
				width: 116rpx;
				height: 40rpx;
			 font-family: PingFangSC, PingFang SC;
				font-weight: 500;
				font-size: 29rpx;
				color: #168EEC;
				line-height: 40rpx;
				text-align: left;
				font-style: normal;
				// margin: 20rpx;
			}

			.wz {
				position: absolute;
			}

			.hwtb {
				width: 144rpx;
				height: 139rpx;
				position: absolute;
				right: 13px;
			 top: 57px;
				background: url(/static/img/ljlc/hw_img.png) no-repeat;
				background-size: 100% 100%;

			}
		}
	}

	.item_top {
		width: 107rpx;
		height: 40rpx;
		font-family: PingFangSC, PingFang SC;
		font-weight: 500;
		font-size: 29rpx;
		color: #168EEC;
		line-height: 40rpx;
		text-align: left;
		font-style: normal;

	}

	.item {
		width: 692rpx;
		height: 250rpx;
		background: #FFFFFF;
		border-radius: 18rpx;
		padding: 10px;
		box-sizing: border-box;
		// margin-top: 15px;
	}

	.item_title {
		width: 132rpx;
	}

	.item_cont {
		width: calc(100% - 40rpx);
		display: flex;
		flex-wrap: wrap;
		padding: 16rpx 20rpx;
		color: #666666;
		font-size: 28rpx;
		background: #fff;

		.cont_li {
			width: 100%;
			padding: 20rpx 0;
			display: flex;
			// justify-content: space-between;
			justify-content: space-between;
			flex-wrap: wrap;

			// .cont_li_label {
			// 	// width: 256rpx;
			// }

			// .cont_li_value {
			// 	// flex: 1;
			// }
		}
	}

	.item_cont1 {
		width: calc(100% - 40rpx);
		display: flex;
		flex-wrap: wrap;
		padding: 16rpx 20rpx;
		color: #666666;
		font-size: 28rpx;
		// background: #fff;

		.cont_li {
			width: 100%;
			padding: 23rpx 0;
			display: flex;
			// justify-content: space-between;
			justify-content: space-between;
			flex-wrap: wrap;

			// .cont_li_label {
			// 	// width: 256rpx;
			// }

			// .cont_li_value {
			// 	// flex: 1;
			// }
		}
	}

	// .black_bar {
	// 	width: 100%;
	// 	height: 20rpx;
	// 	background: #F5F5F5;
	// }
	.zrq {
		// width: 304rpx;
		// height: 36rpx;
		font-family: PingFangSC, PingFang SC;
		font-weight: 400;
		font-size: 25rpx;
		color: #555555;
		line-height: 36rpx;
		text-align: left;
		font-style: normal;
	}

	.itemz {
		width: 692rpx;
		height: 1627rpx;
		background: #FFFFFF;
		border-radius: 18rpx;
		padding: 10px;
		box-sizing: border-box;
		margin-top: 15px;
	}

	.xian {
		width: 636rpx;
		height: 0rpx;
		border: 2rpx dashed #F1F1F1;
		margin-bottom: 20rpx;
	}
</style>
